<template>
  <div class="comp_loadmore btn btn-block btn-link"
       :class="{'disabled': this.state === 'loaded'}">
    <div class="spinner-wrap" v-if="this.state === 'loading'"><mt-spinner class="spinner" :type="1" :size="20"></mt-spinner></div>
    {{text}}
  </div>
</template>
<script>
  export default {
    props: {
      state: {
        type: String,
        default: 'ready' // ready, loading, loaded
      }
    },
    computed: {
      text () {
        let text
        switch (this.state) {
          case 'ready':
            text = '加载更多'
            break
          case 'loading':
            text = ''
            break
          case 'loaded':
            text = '没有更多数据'
            break
        }
        return text
      }
    }
  }
</script>
<style lang="less">
  @import '../assets/less/_mixins-wln.less';

  .comp_loadmore {
    padding: 10px;
    height:30px;
    line-height:30px;
    &.disabled{
      color:@muted;
      opacity: 0.8;
    }
    .spinner-wrap{
      text-align: center;
      margin-top: 5px;
      line-height: 1;
    }
    .spinner{
      display: inline-block;
    }
    .iconfont {
      display: inline-block;
      color: @muted;
      transition: transform 100s linear;
      transform: rotate(1000);
    }
  }
</style>
